<template lang="pug">
.catg-warp
  .catg-box.flex.items-center(v-for="(item,i) in quoteList" :key="i")
    .flex-1
      .grid.grid-cols-3.flex-1
        .name.flex.gap-2.items-center(@click="toggle(i)")
          .size-4.border.border-prim.flex.justify-center.items-center.rounded
            uni-icons( type="checkmarkempty" size="12" v-show="selected.includes(i)")
          .whitespace-nowrap {{item.productName}}
        .desc.text-xs {{item.size}}  {{item.middleMaterial}}
      .grid.grid-cols-3.flex-1
        .num 数量：{{item.num}}
        .price 单价：￥{{item.unitPrice}}
        .price 合计：￥{{item.price}}
    .flex
      switch.scale-75( color="#C3B089" :checked="item.checked"  @change="item.checked=$event.detail.value")
  .text-gray-400.text-center(v-if="quoteList.length==0") 暂无报价，点击添加
  .flex.justify-between(v-if="quoteList.length>0")
    button.option-btn(@click="removeSelected()") 删除
    view 合计￥{{total}}

.bottom-btn
  .flex.justify-around
    button.sub-btn.w-32.mb-2(@click="toCatg") 添加单品
    button.submit-btn.w-32.mb-2(@click="toBaojiaList") 立即下单
 
 
</template>
<script setup lang="ts">
import { useCartStore } from "@/stores/cart";
import qs from "qs";

const { list } = storeToRefs(useCartStore());
const { removeCartByIds } = useCartStore();
const quoteList = ref<any[]>([]);
import { Quote } from "@/api/common";
const total = computed(() => {
  if (!quoteList.value) return 0;
  let num = quoteList.value
    .filter((el) => el.checked)
    .reduce((sum, item) => {
      return sum + (item.price ? item.price * item.num : 0);
    }, 0);
  return Math.round(num*100)/100
});
onShow(() => {
  quotePage();
});
async function quotePage() {
  const res = await Quote(list.value);
  quoteList.value = res.rows.map((el) => {
    return {
      ...el,
      checked: true,
    };
  });
  console.log(quoteList.value);
}

const selected = ref<any[]>([]);
function toggle(i) {
  const index = selected.value.indexOf(i);
  if (index > -1) {
    selected.value.splice(index, 1);
  } else {
    selected.value.push(i);
  }
}
//remove index  in list of selceted
function removeSelected() {
  if(selected.value.length==0)return;
  uni.showModal({
    title:"删除选中单品？",
    success(){
      removeCartByIds(selected.value);
      selected.value = [];
      quotePage();
    }
  })
}

// function toEdit(i) {
//   let item = list[i];
//   console.log(item);

//   let query = {
//     id: item.productId,
//     name: item.type,
//     productTypeCode: item.productTypeCode,
//     productCode: item.productCode,
//     _t: item._t,
//   };
//   console.log(query);

//   uni.navigateTo({
//     url: `/pages/forms/index?${qs.stringify(query)}`,
//   });
// }
function toCatg() {
  uni.switchTab({
    url: `/pages/index/category`,
  });
}
</script>
<style scoped lang="scss">
.add-btn {
  @apply flex-1 border border-focus rounded text-center text-focus py-2 bg-white text-sm;
}

.catg-warp {
  @apply px-2 h-[54vh] overflow-y-auto;
}
.catg-box {
  @apply bg-white rounded px-4 py-2 text-gray-800 mb-2 border border-focus;
  .name {
    @apply text-base;
  }
  .price,
  .num {
    @apply text-xs text-gray-400;
  }
}
.bottom-btn {
  @apply fixed bottom-[calc(env(safe-area-inset-bottom)+1vh)] w-full flex-col items-center justify-center;
}
</style>
